﻿<UserControl x:Class="NotWindowsStoreMetro.CollectionSummaryPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Loaded="Page_Loaded" Unloaded="Page_Unloaded"
    mc:Ignorable="d"
    d:DesignHeight="768" d:DesignWidth="1366">

  <UserControl.Resources>
    <CollectionViewSource x:Name="CollectionViewSource" x:Key="CollectionViewSource" />

    <Style x:Key="CategoryPanelStyle" TargetType="StackPanel">
      <Setter Property="HorizontalAlignment" Value="Left"/>
      <Setter Property="VerticalAlignment" Value="Top"/>
      <Setter Property="Margin" Value="120,0,0,0"/>
      <Setter Property="Orientation" Value="Horizontal"/>
    </Style>

    <Style x:Key="PortraitCategoryPanelStyle" TargetType="StackPanel" BasedOn="{StaticResource CategoryPanelStyle}">
      <Setter Property="Margin" Value="100,0,0,0"/>
    </Style>

    <Style x:Key="SnapCategoryPanelStyle" TargetType="StackPanel" BasedOn="{StaticResource CategoryPanelStyle}">
      <Setter Property="Width" Value="296"/>
      <Setter Property="Margin" Value="12,0,12,0"/>
      <Setter Property="Orientation" Value="Vertical"/>
    </Style>
  </UserControl.Resources>

  <!--Page Content -->

  <Grid x:Name="LayoutRoot" Style="{StaticResource LayoutRootGridStyle}">
    <VisualStateManager.VisualStateGroups>
      <VisualStateGroup x:Name="OrientationStates">
        <VisualState x:Name="Full"/>
        <VisualState x:Name="Fill"/>
        <VisualState x:Name="Portrait">
          <Storyboard>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Style" Storyboard.TargetName="CategoryPanel">
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitCategoryPanelStyle}"/>
            </ObjectAnimationUsingKeyFrames>
          </Storyboard>
        </VisualState>
        <VisualState x:Name="Snapped">
          <Storyboard>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Style" Storyboard.TargetName="BackButton">
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnapBackButtonStyle}"/>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Style" Storyboard.TargetName="PageTitle">
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnapPageTitleStyle}"/>
            </ObjectAnimationUsingKeyFrames>

            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Style" Storyboard.TargetName="ScrollViewer">
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource VerticalScrollViewStyle}"/>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Style" Storyboard.TargetName="CategoryPanel">
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnapCategoryPanelStyle}"/>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Width" Storyboard.TargetName="HeaderTitlePanel">
              <DiscreteObjectKeyFrame KeyTime="0" Value="280"/>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="ItemTemplate" Storyboard.TargetName="ItemListView">
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnapListItemTemplate}"/>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="ItemsPanel" Storyboard.TargetName="ItemListView">
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnapListItemsPanelTemplate}"/>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemGridView" Storyboard.TargetProperty="Visibility" >
              <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemListView" Storyboard.TargetProperty="Visibility" >
              <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Width" Storyboard.TargetName="Image">
              <DiscreteObjectKeyFrame KeyTime="0" Value="270"/>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Height" Storyboard.TargetName="Image">
              <DiscreteObjectKeyFrame KeyTime="0" Value="180"/>
            </ObjectAnimationUsingKeyFrames>
          </Storyboard>
        </VisualState>
      </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <Grid.RowDefinitions>
      <RowDefinition Height="140"/>
      <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <Grid>
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
      </Grid.ColumnDefinitions>
      <Button x:Name="BackButton" Click="BackButton_Click" Style="{StaticResource BackButtonStyle}"/>
      <TextBlock x:Name="PageTitle" Text="{Binding Title}" Style="{StaticResource PageTitleStyle}" Grid.Column="1" />
    </Grid>

    <ScrollViewer x:Name="ScrollViewer" Style="{StaticResource HorizontalScrollViewStyle}" HorizontalAlignment="Left" Margin="0" Padding="0,0,0,35" Grid.Row="1">
      <StackPanel x:Name="CategoryPanel" Style="{StaticResource CategoryPanelStyle}">
        <Grid x:Name="HeaderTitlePanel" Width="480">
          <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
          </Grid.RowDefinitions>
          <Image x:Name="Image" Height="240" Margin="0,21,0,0" Grid.Row="0" Stretch="UniformToFill" Source="{Binding Image}"/>
        </Grid>
        <GridView x:Name="ItemGridView" ItemsSource="{Binding Source={StaticResource CollectionViewSource}}" Background="{StaticResource PageBackgroundBrush}"
                  ItemTemplate="{StaticResource ListItemTemplate}" ItemContainerStyle="{StaticResource ListTileStyle}" ItemsPanel="{StaticResource GridItemsPanelTemplate}"
                  BorderThickness="0" VerticalAlignment="Stretch" SelectionChanged="ItemView_SelectionChanged"/>
        <ListView x:Name="ItemListView" ItemsSource="{Binding Source={StaticResource CollectionViewSource}}" Visibility="Collapsed" Margin="0,10,0,0" Grid.Row="1" Background="{StaticResource PageBackgroundBrush}"
                  ItemTemplate="{StaticResource ListItemTemplate}" ItemContainerStyle="{StaticResource SnapListTileStyle}" ItemsPanel="{StaticResource SnapListItemsPanelTemplate}"
                  BorderThickness="0" VerticalAlignment="Stretch" SelectionChanged="ItemView_SelectionChanged"/>
      </StackPanel>
    </ScrollViewer>
  </Grid>

</UserControl>
